<template>
    <div class='all'>
      <!-- 头部 -->
        <div class='header'>
            <div class="head">
                <div class='header-wrap'>
                    <div class='wrap-left'>
                        <i class='iconfont icon-dingxiang'></i>
                    </div>
                    <div class='wrap-right'>
                        <ul class='right-ul'>
                            <li>美食 |</li>
                            <li>酒店 |</li>
                            <li>出行 |</li>
                            <li>娱乐 |</li>
                            <li>生活 |</li>
                            <li>购物</li>
                            
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class='header-banner'>
                <!-- <img src="/show-yellow/src/assets/ld/img/banner.png" class='back'> -->
                <div class='logo'>
                    <p class='shop'>逛逛商铺</p>
form                    <p>寻找你想要的商铺</p>
                </div>
                <div class='wow'>
                    <button>预约店铺</button>
                </div>
            </div>
        </div>
        <!-- 搜索店铺 -->
        <div class="con">
          <div class='con-wrap'>
            <div class="from-wrap">
              <form action="">
                <el-input v-model="input" placeholder="请输入店铺类型" class='slot'></el-input>
                <el-button type="primary">查询</el-button>
              </form>
            </div>
          </div>
        </div>
        <!-- 随机推荐的店铺 -->
        <div class="classify">
          <!-- 轮播图 -->
            <!-- <div class="block">
              <span class="demonstration">Click 指示器触发</span>
              <el-carousel trigger="click" height="400px">
                <el-carousel-item v-for="item in 4" :key="item">
                  <h3 class="small">{{ item }}</h3>
                </el-carousel-item>
              </el-carousel>
            </div> -->
        </div>
       <Center></Center>
       <Center></Center>
       <!-- 底部联系我们 -->
       <div class="part">
         <div class="contact">
           <div class="com-title">
             <p class="com-wow">联系客服了解更多内容</p>
           </div>
           <div class="com-main">
             <div class="container">
               <div class="from-com">
                 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                   <p class="row">现在预约店铺 立马为你提供服务</p>
                    <el-form-item label="姓名" prop="name" class='tip'>
                      <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="店铺类型" prop="region" class='tip'>
                      <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="联系方式" prop="desc" class='tip'>
                      <el-input type="text" v-model="ruleForm.desc"></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="submitForm('ruleForm')">立即预约</el-button>
                    </el-form-item>
                    <div class="text-grey">
                      <div>简单三步便可预约</div>
                      <div>确认店铺类型--开通定位--开启你的预约</div>
                    </div>
                  </el-form>
                 <div class="bet">
                   <div class="l"><span>400-800-8888</span></div>
                   <div class="r">
                     周一至周五 9:00-22:00<br>
                     周六至周日 9:00-18:00
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
    </div>
</template>

<script>
import Center from '../components/ld/M-center'
  export default {
    name: 'HelloWorld',
    props: {
      msg: String
    },
    components:{Center},
    data() {
      return {
        input:'',
        // shops:[
        //   {img:require("../assets/TB16YtGi46I8KJjy0FgXXXXzVXa-230-230.png"),name:'美折促销',appe:'真不错'},
        //   {img:'../assets/TB16YtGi46I8KJjy0FgXXXXzVXa-230-230.png',name:'超级店长',appe:'真不错'},
        //   {img:'../assets/TB16YtGi46I8KJjy0FgXXXXzVXa-230-230.png',name:'优惠券',appe:'真不错'},
        //   {img:'../assets/TB16YtGi46I8KJjy0FgXXXXzVXa-230-230.png',name:'爱用交易',appe:'真不错'},
        // ],
        stores:[
          {title:'6.欢乐逛打折',desc:'促销'},
          {title:'7.爱用商品',desc:'促销'},
          {title:'8.快递助手',desc:'促销'},
          {title:'9.打包配',desc:'促销'},
          
        ],
        // 咨询的表单
        ruleForm: {
          name: '',
          region: '',
          desc: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择店铺类型', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '联系方式', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.all{
    min-width: 1000px;
    margin: 0 auto;
    width: 100%;
}
/* 头部· */
.header{
  
    width: 100%;
}
.head{
    /* width: 100%; */
    background-color: black;
    margin: 0 auto;
}
.header-wrap{
    margin: 0 auto;
    height: 48px;
    width: 80%;
    display: flex;
    line-height: 48px;
    justify-content: space-around;
}
.wrap-left i{
    font-size: 20px;
    color: white;
}
/* .wrap-right{
    
} */
.right-ul{
    display: flex;
    list-style: none;
}
.right-ul li{
    padding-right: 15px;
    color: white;
   
}
.right-ul li:hover{
  color: aquamarine;
}
.header-banner{
    margin: 0 auto;
    height: 420px;
    position: relative;
}
.back{
    width: 100%;
    height: 100%;
} 
.logo{
     position: absolute;
     left: 10%;
     top: 40%;
}
.shop{
    color:#666;
    margin-bottom: 15px;
}
.logo p{
    letter-spacing: 6px;
    font-size: 36px;
    font-weight: bolder;
}
.wow{
    position: absolute;
    left: 13%;
    top: 70%;
}
.wow button{
    color: white;
    font-size: 20px;
    padding: 5px 50px;
    background-color: darkturquoise;
    border: 1px solid darkturquoise;
    outline: none;
    cursor: pointer;
}
/* 搜索店铺 */
.con{
  /* margin: 0 auto; */
  width: 100%;
  background-color:#fafbfd ;
}
.con-wrap{
  margin: 0 auto;
  padding-right: 15px;
  padding-left: 15px;
}
.from-wrap{
  margin: 0 auto;
  padding: 40px 0;
}
.slot{
  width: 30%;
  margin-right: 20px;
}
/* 随机推荐的店铺 */
.classify{
  width: 100%;
  margin: 0 auto;
}
.el-carousel__item h3 {
    color: red;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    /* margin: 0; */
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }


/* 底部的联系我们 */
.part{
  width: 100%;
  text-align: center;
}
.contact{
  margin: 0 auto;
}
.com-title{
  width: 100%;
}
.com-wow{
  text-align: center;
  font-size: 34px;
  font-family: "FZLTZHJW";
}
/* 主要表单的内容 */
.com-main{
  height: 500px;
  margin-top: 110px;
  /* background-image: url('../assets/bg-contact.png'); */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.container{
  display: flex;
  position: relative;
}
.from-com{
    position:absolute;
    right: 60px;
    width: 425px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #ddd;
    -webkit-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    transform: translateY(-40px);
}
.demo-ruleForm{
      padding: 30px 30px 20px;
}
.row{
    color: #333;
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 20px
}
.tip{
  margin-bottom: 20px;
  display: flex;
  text-align: justify;
}
.text-grey{
  color: grey;
}
.text-grey div{
  margin-bottom:8px;
}
.bet{
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    padding: 10px;
    font-size: 12px;
    color: #999;
    border-top: 1px solid #ddd;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
</style>
